<template>
  <BasicTable2
    title=""
    :columns="columns"
    :dataSource="rows"
    :loading="loading"
    striped
    bordered
    showTableSetting
    :resizeHeightOffset="33"
  >
    <template #bodyCell="{ column, record }">
      <template v-if="column.key === 'status'">
        <a-switch
          :disabled="!can('changeUserStatus')"
          v-model:checked="record.status"
          :checkedValue="1"
          :unCheckedValue="0"
          @click="onChangeStatus(record)"
        />
      </template>
      <template v-if="column.key === 'action' && record.id !== 1">
        <span class="">
          <a class="ml-2" v-if="can('editUser')" @click="onEdit(record)">编辑</a>
          <a class="ml-2" v-if="can('menuPermis')" type="primary" @click="$emit('on-role', record.id)"> 页面权限 </a>
          <a class="ml-2" v-if="can('editUserPermis')" type="primary" @click="$emit('on-user-permis', record.id)"> 用户权限 </a>
          <a class="ml-2" v-if="can('editProjectPermis')" type="primary" @click="$emit('on-project-permis', record.id)">项目权限 </a>
          <a class="ml-2" v-if="can('deleteUser')" @click="onDelete(record)">删除</a>
        </span>
      </template>
    </template>
    <template #toolbar>
      <a-button type="primary" ghost v-auth="'addUser'" @click="$emit('on-add')">
        新增用户
      </a-button>
      <!-- <a-button type="primary" ghost @click="$emit('on-role')"> 权限管理 </a-button> -->
    </template>
  </BasicTable2>
</template>
  <script lang="ts">
import { defineComponent, ref, createVNode } from 'vue';
import { BasicTable2 } from '/@/components/Table';
import { getCols } from './tableData';
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import { Modal } from 'ant-design-vue';
import { defHttp } from '/@/utils/http/axios';
import { message } from 'ant-design-vue';
import { usePermission } from '/@/hooks/web/usePermission';

export default defineComponent({
  components: { BasicTable2 },
  setup(props, { emit }) {
    const loading = ref(false);
    const rows = ref([]);
    const { can } = usePermission();

    const onDelete = (row) => {
      Modal.confirm({
        title: '提示',
        icon: createVNode(ExclamationCircleOutlined),
        content: createVNode('div', { style: 'color:black;' }, '确定删除？'),
        onOk() {
          defHttp.post({ url: '/user/delete', params: { id: row.id } }).then((res) => {
            message.success('删除成功');
            fetch();
          });
        },
      });
    };
    const onEdit = (row) => {
      emit('on-edit', row);
    };

    const fetch = (keywrod = '') => {
      defHttp.get({ url: `/user/search?keyword=${keywrod}` }).then((res) => {
        rows.value = res.data;
      });
    };

    const onChangeStatus = (row) => {
      console.log(row);
      console.log(row.id);
      defHttp
        .post({ url: '/user/change-status', params: { id: row.id, status: row.status } })
        .then((res) => {
          message.success('操作成功');
        });
    };

    fetch();

    return {
      columns: getCols(),
      rows,
      loading,
      onDelete,
      onEdit,
      onChangeStatus,
      fetch,
      can,
    };
  },
});
</script>
